<template>
	<view class="profile-page">
		<!-- 顶部用户信息区域 -->
		<view class="user-info-section">
			<view class="user-info">
				<view class="user-avatar">
					<img 
						class="user-avatar-img"
						src="@/static/icon/headPortrait.png" 
						:show-level="false"
					></<img>
				</view>
				<view class="user-details">
					<text class="user-phone">{{ userPhone }}</text>
                    <view class="user-badges">
                        <view 
                            class="badge" 
                            :class="userStore.isVerified.value ? 'verified' : 'unverified'"
                            @click="handleVerificationClick"
                        >
							<u-icon 
								:name="userStore.isVerified.value ? 'checkmark-circle' : 'info-circle'" 
								size="16" 
								:color="userStore.isVerified.value ? '#52C41A' : '#999999'"
							></u-icon>
							<text class="badge-text">{{ userStore.isVerified.value ? '已实名' : '未实名' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 实名认证横幅 -->
		<view v-if="!userStore.isVerified.value" class="verification-banner">
			<text class="banner-text">实名认证后可报名高薪企业</text>
			<u-button 
				type="primary" 
				size="mini" 
				:custom-style="verificationBtnStyle"
				@click="handleVerificationClick"
			>
				去认证
			</u-button>
		</view>

		<!-- 我的服务 -->
		<view class="service-section">
			<text class="section-title">我的服务</text>
			<view class="service-grid">
				<view class="service-item" @click="goToService('favorites')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon05.png" />
					</view>
					<text class="service-text">我的收藏</text>
				</view>
				<view class="service-item" @click="goToService('records')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon10.png" />
					</view>
					<text class="service-text">考勤记录</text>
				</view>
				<view class="service-item" @click="goToService('materials')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon07.png" />
					</view>
					<text class="service-text">入职资料</text>
				</view>
				<view class="service-item" @click="goToService('salary')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon09.png" />
					</view>
					<text class="service-text">我的薪资</text>
				</view>
				<view class="service-item" @click="goToService('advance')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon12.png" />
					</view>
					<text class="service-text">我的预支</text>
				</view>
				<view class="service-item" @click="goToService('contract')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon11.png" />
					</view>
					<text class="service-text">请假申请</text>
				</view>
				<view class="service-item" @click="goToService('out')">
					<view class="service-icon">
						<img style="width: 70rpx; height: 70rpx;" src="@/static/icon/my-icon14.png" />
					</view>
					<text class="service-text">离职申请</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { userStore } from '@/stores/userStore'

// 用户电话号码（脱敏处理）
const userPhone = computed(() => {
	const phone = userStore.userInfo.value?.phone
	if (!phone) {
		return '未设置'
	}
	// 使用userCache的脱敏方法
	return userStore.maskPhone(phone)
})

// 实名认证按钮样式
const verificationBtnStyle = {
	backgroundColor: '#333333',
	borderColor: '#333333',
	color: '#FFFFFF',
	fontSize: '26rpx',
	padding: '8rpx 16rpx',
	borderRadius: '20rpx',
	width: 'auto',
	minWidth: '120rpx'
}

// 跳转到在线简历
const goToResume = () => {
	uni.showToast({
		title: '跳转到在线简历',
		icon: 'none'
	})
}

// 处理实名标签点击
const handleVerificationClick = () => {
	if (userStore.isVerified.value) {
		// 已实名，跳转到实名认证成功页
		uni.navigateTo({
			url: '/pages/verification-success/verification-success'
		})
	} else {
		// 未实名，跳转到实名认证页
		uni.navigateTo({
			url: '/pages/verification/verification'
		})
	}
}

// 跳转到实名认证
const goToVerification = () => {
	uni.navigateTo({
		url: '/pages/verification/verification'
	})
}

// 跳转到服务页面
const goToService = (serviceType: string) => {
	// 检查是否已实名认证
	if (!userStore.isVerified.value) {
		uni.showModal({
			title: '提示',
			content: '您还未实名认证，请先完成实名认证后再补充入职资料',
			confirmText: '去认证',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					// 跳转到实名认证页面
					uni.navigateTo({
						url: '/pages/verification/verification'
					})
				}
			}
		})
		return
	}
	switch (serviceType) {
		case 'favorites':
			// 跳转到我的收藏页面
			uni.navigateTo({
				url: '/pages/favorites/favorites'
			})
			break
		case 'materials':

			// 跳转到入职资料补充页面
			uni.navigateTo({
				url: '/pages/onboarding/onboarding'
			})
			break
		case 'records':
			// 跳转到在职记录页面
			uni.navigateTo({
				url: '/pages/records/records'
			})
			break
		case 'advance':
			// 跳轉到我的預支頁面
			uni.navigateTo({
				url: '/pages/advance/advance'
			})
			break
		case 'contract':
			// 跳轉到請假申請頁面
			uni.navigateTo({
				url: '/pages/leave/leave'
			})
			break
		case 'salary':
			// 跳转到我的薪资页面
			uni.navigateTo({
				url: '/pages/salary/salary'
			})
			break
		case 'out':
			// 跳转到离职申请页面
			uni.navigateTo({
				url: '/pages/resign/resign'
			})
			break
		default:
			uni.showToast({
				title: `跳转到${serviceType}`,
				icon: 'none'
			})
	}
}

onMounted(() => {
	console.log('我的页面加载完成')
})
</script>

<style lang="scss" scoped>
.profile-page {
	background-color: #F5F5F5;
	min-height: 100vh;
	padding: 20rpx;
	// background: url(@/static/index/index-bg.png) no-repeat;
	background-color: #fff;
	background-size: 100%;
}

/* 顶部用户信息区域 */
.user-info-section {
	padding: 30rpx;
	margin-top: 60rpx;
	margin-bottom: 20rpx;
	
	.user-info {
		display: flex;
		align-items: flex-start;
		
		.user-avatar {
			margin-right: 20rpx;
			.user-avatar-img{
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
			}
		}
		
		.user-details {
			flex: 1;
			margin-top: 12rpx;
			.user-phone {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 15rpx;
			}
			
			.user-badges {
				display: flex;
				gap: 15rpx;
				margin-bottom: 20rpx;
				
				.badge {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					
					&.unverified {
						background-color: #F5F5F5;
						
						.badge-text {
							font-size: 24rpx;
							color: #666666;
						}
					}
					
					&.verified {
						background-color: #F6FFED;
						border: 1rpx solid #B7EB8F;
						
						.badge-text {
							font-size: 24rpx;
							color: #52C41A;
						}
					}
					
					&.member {
						background-color: #333333;
						
						.badge-text {
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
			
			.user-metrics {
				display: flex;
				gap: 40rpx;
				
				.metric-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.metric-value {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 5rpx;
					}
					
					.metric-label {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}
		
		.online-resume {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 10rpx 16rpx;
			border-radius: 20rpx;
			background-color: #F5F5F5;
			
			.resume-text {
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
}

/* 实名认证横幅 */
.verification-banner {
	background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-primary-dark) 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.banner-text {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 500;
		flex: 1;
		margin-right: 20rpx;
	}
}

/* 我的服务 */
.service-section {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}
	
	.service-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40rpx 20rpx;
		
		.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15rpx;
			
			.service-icon {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F5F5F5;
				border-radius: 50%;
			}
			
			.service-text {
				font-size: 26rpx;
				color: #333333;
				text-align: center;
			}
		}
	}
}
</style> 